<template>
  <tr class="business-row">
    <td><img :src="business.avatar" alt="avatar" class="avatar" /></td>
    <td>{{ business.id }}</td>
    <td>{{ business.busName }}</td>
    <td>{{ business.busPhone }}</td>
    <td>{{ business.busAddress }}</td>
    <td>
      <a-button type="link" @click="manageBusiness">管理</a-button>
    </td>
  </tr>
</template>

<script>
// import { useRouter } from 'vue-router';

// const router = useRouter();

export default {
  name: 'BusinessRow',
  props: {
    business: {
      type: Object,
      required: true,
    },
  },
  methods: {
    manageBusiness() {
      // 处理管理逻辑
      console.log(`管理商家: ${this.business.busName}`);
      this.$router.push({ path: '/system/account_editor', query: { type: 'business', id: this.business.id } });
    },
  },
};
</script>

<style scoped>
.business-row {
  background: rgba(50, 50, 50, 0.8);
  /* 暗色微透明背景 */
  backdrop-filter: blur(10px);
  /* 磨砂效果 */
  color: #ffffff;
  /* 字体颜色为白色 */
  transition: background 0.3s;
  /* 背景过渡效果 */
}

.business-row:hover {
  background: rgba(70, 70, 70, 0.9);
  /* 悬停时稍微加深透明度 */
}

.avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}
</style>